<%@page import="com.moefor.clover.model.enums.StateOfOrder"%>
<%@page import="java.util.Set"%>
<%@page import="com.moefor.clover.model.Message"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="com.moefor.clover.model.*"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/jquery-labelauty.css" rel="stylesheet">
<link href="res/css/messenger.css" rel="stylesheet">
<link href="res/css/messenger-theme-block.css" rel="stylesheet">
<style>
body {
	padding-bottom: 30px;
	background: url(res/img/background.gif) repeat 0 0;
}
/***********************nva****************************/
.nav-item:hover {
	background-color: #F0F0F0 !important;
}

.active .nav-item:hover {
	background-color: #e7e7e7 !important;
	cursor: pointer;
}

.glyphicon {
	top: 3px;
}

.open .dropdown-toggle {
	background: #FFF !important;
}

.dropdown-menu {
	border: 0px;
	margin-top: -1px !important;
}

.dropdown-menu a {
	text-align: center;
}

.control {
	padding: 3px 0px;
	text-align: center;
}

.control a {
	display: inline-block !important;
	width: 60px;
	padding: 0px !important;
	color: #888 !important;
}

#msgs .dropdown-header {
	text-align: center;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.msg-item {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.msg-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block !important;
	padding: 0 5px !important;
}

#user-icon a {
	padding: 3px 0 !important;
}

#user-icon a:hover {
	background-color: #FFF;
}
/***********************nva****************************/
/***********************search-box****************************/
.search-box {
	width: 100%;
	height: 100%;
}

.search-box select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-progress-appearance: none;
	border: solid 3px #FB9000;
	border-right: 0;
	width: 80px;
	height: 100%;
	float: left;
	outline: none;
	background-color: #F5F5F5;
	color: #777;
	padding: 0 10px;
	background-image: url(res/img/down-tag.png);
	background-repeat: no-repeat;
	background-position: right;
}

.search-box select option {
	background-color: #FFF;
}

.search-box input[type="text"] {
	border: solid 3px #FB9000;
	width: calc();
	width: -moz-calc(100% -180px);
	width: -webkit-calc(100% - 180px);
	height: 100%;
	outline: none;
	padding: 0px 5px;
	float: left;
	border-right: 0;
	border-left: 0;
}

.search-box input[type="submit"] {
	width: 100px;
	height: 100%;
	border: 0;
	background-color: #FB9000;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.search-box input[type="submit"]:hover {
	background-color: #FDAC3F;
}
/***********************search-box****************************/

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/

/***********************goods-list****************************/
.col-md-offset-1_5 {
	margin-left: 12.5%;
}

@media screen and (max-width: 991px) {
	#goods-page {
		padding-left: 0px;
		padding-right: 0px;
	}
	.col-md-offset-1_5 {
		margin-left: 0;
	}
}

.good-box {
	
}

.good-item {
	height: 144px;
	background-color: #FFF;
	padding: 10px;
}

.good-info {
	height: 100%;
	width: calc(100% - 165px);
	width: -moz-calc(100% - 165px);
	width: -webkit-calc(100% - 165px);
	float: left;
}

.seller-info {
	height: 100%;
	border-left: 1px solid #F8F6E4;
	width: 165px;
	float: left;
	background-color: #FFFEF8;
	padding-left: 10px;
}

.good-pic-box {
	height: 100%;
	width: 124px;
	float: left;
}

.good-pic {
	width: 100%;
	height: 100%;
	background: url("res/img/3.jpg") no-repeat center;
	display: inline-block;
	background-size: cover;
}

.good-des-box {
	height: 100%;
	width: calc(100% - 124px);
	width: -moz-calc(100% - 124px);
	width: -webkit-calc(100% - 124px);
	padding-left: 15px;
	float: left;
}

.good-name {
	color: #222;
	display: inline-block;
	max-width: 35%;
	padding-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.good-name:hover {
	color: #222;
}

.good-name:visited {
	color: #222;
}

.good-name:link {
	color: #222;
	text-decoration: none;
}

.good-market {
	color: #222;
	display: inline-block;
	padding-bottom: 8px;
	margin-left: 10px;
	max-width: 55%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.good-market:hover {
	color: #222;
}

.good-market:visited {
	color: #222;
}

.good-market:link {
	color: #222;
	text-decoration: none;
}

.glyphicon-map-marker {
	top: 1px;
}

.delete {
	font-size: 16px;
	color: #bbb;
	float: right;
}

.delete:hover {
	color: #333;
}

.good-des-box b {
	color: #999;
}

.good-des-box em {
	color: #F40;
	font-weight: 700;
	font-size: 14px;
	font-style: normal;
	font-family: Verdana;
}

.good-des-box div {
	height: 40px;
	width: 100%;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 5px;
}

.publish-time {
	float: left;
	color: #999;
}

.leave-word {
	float: right;
	margin-right: 20px;
}

.A {
	color: #FB9000;
	text-decoration: none;
}

.A:hover {
	color: #FB9000;
	text-decoration: none;
}

.A:link {
	text-decoration: none;
}

.A:visited {
	color: #FB9000;
}

.seller-name {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 60px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: inline-block;
}

@media screen and (max-width: 525px) {
	.seller-info {
		display: none;
	}
	.good-info {
		width: 100%;
	}
	.good-des-box {
		padding-right: 0;
	}
}

/***********************goods-list****************************/
.deal-item {
	font-family: "Microsoft YaHei";
	box-shadow: 0 0 5px #ccc;
	margin-top: 20px;
}

.item-header {
	height: 45px;
	background-color: #f1f1f1;
	color: #777;
	font-size: 16px;
	padding: 0 20px;
}

.item-num {
	height: 45px;
	line-height: 45px;
}

.confirm-btn {
	display: block !important;
	float: right !important;
	padding: 5px 10px;
	margin-top: 5.5px;
}

.comment-group {
	padding: 10px;
}

.comment-group-item {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #222;
	font-size: 13px;
	line-height: 1.7;
	padding: 10px 0;
	word-wrap: break-word;
	list-style: none;
	border-bottom: solid 1px #ddd;
}

.commenter-icon {
	width: 50px;
	height: 50px;
	vertical-align: top;
	background: url("res/img/default.jpg") no-repeat center;
	background-size: cover;
	vertical-align: top;
}

.comment-detail {
	padding-left: 10px;
	width: calc(100% - 70x);
	width: -moz-calc(100% - 70px);
	width: -webkit-calc(100% - 70px);
	margin-bottom: -7px;
	display: inline-block;
}

.comment-detail div {
	padding-bottom: 3px;
}

.comment-detail span {
	color: #bbb;
}
</style>
</head>

<body>

	<nav id="top" class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img style="float: left; height: 50px;" src="res/img/logo.png" /> <a
					class="navbar-brand" href="home.page">Clover</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul id="user-nav" class="nav navbar-nav">
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-user" aria-hidden="true"></span>
							${user.username}<span class="caret"></span></a>
						<ul class="dropdown-menu" style="min-width: 130px;" role="menu">
							<li id="user-icon"><a href="userinfo.page"><img
									class="img-circle"
									style="width:120px;height:120px;background:url(${user.avator.url}) no-repeat center;background-size:cover;"
									id="user-icon" /></a></li>
							<li class="control"><a href="userinfo.page">账号管理</a><a
								href="user/signout.do">注销登陆</a></li>
						</ul></li>
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							消息 <span class="caret"></span></a>
						<ul id="msgs" class="dropdown-menu" role="menu">
							<li class="dropdown-header">未读的新消息</li>
							<%					
     						Object object = request.getAttribute("msgSet");
     						if(object != null && !((Set<Message>)object).isEmpty()){
     							for(Message msg : (Set<Message>)object){
	     							out.print("<li role='separator' class='divider'></li>");
	     							out.print("<li class='msg-item'><span style='width:70%;text-align:left'>"+
	     								msg.getContent()+
	     								"</span><span style='width:30%;'>"+
	     								msg.getSender().getUsername()+	
	     								"</span></li>");
	     							out.print("<li role='separator' class='divider'></li>");
	     						}
     						}else{
     							out.print("<li role='separator' class='divider'></li>"+
     										"<li class='msg-item'><span style='width:70%;text-align:left'>"+
	     									"<span>暂时没有新消息</span>"+
	     									"</span></li>"+
	     									"<li role='separator' class='divider'></li>");						
     						}
     	
     						
     		
     			%>
							<li><a id='checkAll' href="userinfo.page#comment"
								style="width: 100%; text-align: center;">查看全部</a></li>
						</ul></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li class="active"><a class="nav-item"><span
							class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
							我的交易</a></li>
					<li><a class="nav-item" href="onsale.page"> <span
							class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
							我的寄售
					</a></li>
					<!-- 
                    <li><a class="nav-item" href="favorite.page"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 我的收藏</a></li>  
                     -->
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row" style="padding: 30px 0;">
			<div class="col-md-6 col-md-offset-3" style="height: 34px;">
				<form class="search-box">
					<select>
						<option value="goods">商品</option>
						<option value="market">Market</option>
					</select> <input type="text" placeholder="Search"> <input
						type="submit" value="搜索">
				</form>
			</div>
		</div>

		<div
			style="background-color: #fff; box-shadow: 0 0 10px #ccc; margin: 0;"
			class="row">
			<div class="col-md-6"
				style="padding-top: 20px; padding-bottom: 20px;">
				<span
					style="color: #ccc; font-size: 20px; width: 100%; text-align: center; display: block;">卖方</span>
				<hr>
				<%
                 	List<Goods> sellGoodsItmes = (List<Goods>)request.getAttribute("sellGoodsItems");
                 	if(sellGoodsItmes == null){
                 		
                 	}else{
                 		for(Goods g: sellGoodsItmes){
                 			Set<Order> orderItems = g.getOrderItems();
                 			if(orderItems.size() > 0){
                 %>
				<div class="deal-item">
					<div class="item-header">
						<%switch(g.getState()){
                    case ON_SALE:
                    	%><a id='confirm-deal' class="confirm-btn"
							data-goods-id=<%=g.getId() %> href="#">确认交易</a>
						<%break;
                    case SOLD:
                    	%><span class="confirm-btn">已完成</span>
						<%break;
                    case BAN:
                    	%><span class="confirm-btn">已撤回</span>
						<%break;
                    } %>
					</div>
					<div class="good-box">
						<div class="good-item">
							<div class="good-pic-box">
								<a href="item.page?goodsid=<%=g.getId() %>" class="good-pic"
									style="background:url(<%=g.getPicItems().iterator().next().getUrl() %>) no-repeat center;background-size:cover;"></a>
							</div>
							<div class="good-des-box">
								<a class="good-name" href="item.page?goodsid=<%=g.getId() %>"><%=g.getName() %></a>
								<p>
									<b>¥ </b><em><%=g.getPrice() %></em>
								</p>
								<div><%=g.getIntroduction() %></div>
								<span class="leave-word" style="color: #ccc;">预约<%=orderItems.size() %></span>
							</div>
						</div>
					</div>
					<div class="comment-box">
						<ul class="comment-group">
							<%for(Order o : orderItems){%>
							<li class="comment-group-item""><img class="commenter-icon">
								<div class="comment-detail">
									<div class="comment-header">
										<a href="allsale.page?userid=<%=o.getCustomer().getId() %>"><%=o.getCustomer().getUsername() %></a>
									</div>

									<div class="comment-content">
										<%=o.getRemarks() %>
									</div>

									<div class="comment-footer">
										<span>
											<%
                                        long tmp = (new Date()).getTime() - o.getDate().getTime();
                						String date;
                						if((tmp/24/60/60/1000) >= 1){
                							date = (tmp/24/60/60/1000) + "天";
                						}else if((tmp/60/60/1000) >= 1){
                							date = (tmp/60/60/1000) + "小时";
                						}else if((tmp/60/1000) >= 1){
                							date = (tmp/60/1000) + "分钟";
                						}else{
                							date = "1分钟";
                						};
                						out.print(date);
                                        %>前
										</span>
									</div>
								</div></li>
							<%}%>
						</ul>
					</div>
				</div>
				<%}}}%>

			</div>

			<div class="col-md-6"
				style="padding-top: 20px; padding-bottom: 20px;">
				<span
					style="color: #ccc; font-size: 20px; width: 100%; text-align: center; display: block;">买方</span>
				<hr>
				<%
                List<Order> buyOrderItems = (List<Order>)request.getAttribute("buyOrderItems");
                if(buyOrderItems == null){
                	
                }else{
                	for(Order o: buyOrderItems){
                %>
				<div class="deal-item">
					<div class="item-header">
						<span class="item-num">流水号： <%=(o.getDate().getTime() + o.getId()) %></span>
						<span class="confirm-btn completed"> <%switch(o.getState()){
                    case FINISHED:
                    	out.print("已结束");
                    	break;
                    case WAIT_FOR_CFMD:
                    	out.print("待确认");
                    	break;
                    } %>
						</span>
					</div>
					<div class="good-box">
						<div class="good-item">
							<div class="good-pic-box">
								<a href="item.page?goodsid=<%=o.getGoods().getId() %>"
									class="good-pic"
									style="background:url(<%=o.getGoods().getPicItems().iterator().next().getUrl() %>) no-repeat center;background-size:cover;"></a>
							</div>
							<div class="good-des-box">
								<a class="good-name"
									href="item.page?goodsid=<%=o.getGoods().getId() %>"><%=o.getGoods().getName() %></a>
								<!-- 
                                <a class="good-market" href="#"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><%=o.getGoods().getMarketItems().iterator().next().getName() %></a>
                                 -->
								<p>
									<b>¥ </b><em>333.33</em>
								</p>
								<div><%=o.getGoods().getIntroduction() %></div>
								<a class="leave-word A"
									href="item.page?goodsid=<%=o.getGoods().getId() %>#comment">评论<%=o.getGoods().getCommentItems().size() %></a>
							</div>
						</div>
					</div>
				</div>
				<%}}%>
			</div>
		</div>

		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>

	</div>



	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script src="res/js/jquery-labelauty.js"></script>
	<script src="res/js/messenger.min.js"></script>
	<script type="text/javascript">

        $(document).ready(function(){
        	$._messengerDefaults = {
                extraClasses: 'messenger-fixed messenger-theme-block messenger-on-bottom messenger-on-right'
            } 
            $(".search-box input[type='submit']").click(function(){
            	if($(this).prevAll('select').val() == "goods"){
            		location.href = "home.page#keyword=" + $(this).prevAll("input").val();
            	}else{
            		location.href = "home.page#market=" + $(this).prevAll("input").val();
            	}
            	return false;
            });
            
            $('#confirm-deal').click(function(){
            	
            	$.ajax({
            		type:'POST',
            		url:'order/finish.do',
          			data:{'goods_id':$(this).data('goods-id')},
            		success:function(data){
                    	if(data.state){
                    		$.globalMessenger().post({
                                'message':"操作成功",
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    		setTimeout(function(){
                    			location.reload();
                    		},1500);
                    	}else{
                    		$.globalMessenger().post({
                                'message':"操作失败  " + data.data,
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    	}    	
            		}
            	});
            	
            	return false;
            });
            $("#checkAll").click(function(){
            	$.ajax({
            		'async':false,
            		'url':'msg/read_all.do'
            	})
            })
        });
    </script>
</body>
</html>